<template>
    <div class="LyricBody">
        <div class="LyricBody2">
            <div class="LyricBody3">
                <img :src="musicPlay2.img" alt="">
            </div>
            <div class="LyricBody4">
                <div class="LyricBody6">
                    <div>
                        {{ musicPlay2.audioName }}
                    </div>
                    <div class="LyricBody7" v-if="musicPlay2.audioName !== '暂无音乐'">
                        歌手：{{ musicPlay2.musicInfo.ar[0].name }}
                    </div>
                    <div class="LyricBody7" v-if="musicPlay2.audioName !== '暂无音乐'">
                        专辑：{{ musicPlay2.musicInfo.al.name }}
                    </div>
                </div>
                <div class="LyricBody5">
                    <div class="LyricBody8" :style="{ transform: `translateY(-${lineHeight * highlightIndex}px)` }">
                        <template v-for="(item, index) in lyric2.lyrics" :key="index">
                            <p :class="{ 'active': index === activeHigh }">
                                {{ item.content }}
                            </p>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { musicPlay2, lyric2 } from '@/utils/playMusic';
import { ref, watch } from 'vue';

const lineHeight = 55
const highlightIndex = ref(0)
const activeHigh = ref(-1)

watch(() => musicPlay2.id, async () => {
    await lyric2.getLryic()
})

watch(() => musicPlay2.audioCurrent, (value) => {
    const currentTime = value * 1000
    const lyrics = lyric2.lyrics
    let index = 0
    for (let i = 0; i < lyrics.length; i++) {
        if (lyrics[i].timeStamp <= currentTime) {
            index = i
        } else {
            break
        }
    }

    if (index !== activeHigh.value) {
        activeHigh.value = index
    }
    // console.log(index)
    highlightIndex.value = index
})

const btn = () => {
    highlightIndex.value = highlightIndex.value + 1
    activeHigh.value = activeHigh.value + 1
}

</script>

<style scoped lang="scss">
.LyricBody {
    padding-left: var(--lyricMargin);
    padding-right: var(--lyricMargin);
    width: 100%;
    height: 100%;
    position: relative;

    .LyricBody2 {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        overflow: hidden;

        .LyricBody3 {
            // background-color: beige;
            position: relative;

            img {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                position: absolute;
                height: 430px;
                width: 430px;
            }
        }

        .LyricBody4 {
            color: #ffffff;
            overflow: hidden;
            text-align: center;
            height: 90%;

            .LyricBody6 {
                font-size: 2rem;
                width: 100%;
                z-index: 2;

                .LyricBody7 {
                    margin-top: 10px;
                    font-size: 1rem;
                }
            }

            .LyricBody5 {
                margin-top: 20px;
                height: 100%;
                overflow: hidden;
                color: #cfcfcf;

                .active {
                    font-size: 1.5rem;
                    color: #ffffff;
                    transition: transform 0.5s ease-in-out;
                }

                .LyricBody8 {
                    font-size: 1.1rem;
                    transition: transform 0.2s ease-in-out;
                    overflow: hidden;
                    position: relative;

                    p {
                        min-width: 20px;
                        max-width: 600px;
                        min-height: 30px;
                        padding-top: 20px;
                        padding-bottom: 20px;
                    }
                }

            }

        }
    }
}
</style>